Day 11. 簡單的訂購介面(Part 2)

延續Day 10的簡易便當訂購介面，說明如下：

Layout的完整XML如下：

• 在CheckBox中，加上id來提供java辨識，並且利用paddingLeft讓文字與框框之間有一點距離
  • android:id="@+id/addPlasticBag_checkbox"
  • android:paddingLeft="16dp"
• 在訂單總結TextView中，預設為空白，並同樣需要給定id。
  • android:id="@+id/order_summary_text_view"

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:layout_marginTop="8dp"
    android:layout_marginLeft="8dp"
    tools:content=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="這樣母Tom便當店"
        android:textSize="20sp"
        android:textFontWeight="true"
        android:textAllCaps="true"/>

    <CheckBox
        android:id="@+id/addPlasticBag_checkbox"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_marginTop="16dp"
        android:paddingLeft="16dp"
        android:text="加購購物袋(需加2元)" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="數量"
        android:textSize="16sp"
        android:textAllCaps="true"/>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        tools:content=".MainActivity">

    <Button
        android:layout_height="48dp"
        android:layout_width="48dp"
        android:text="-"
        android:onClick="decrement"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/quantity_text_view"
        android:text="2"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:textSize="16sp"
        android:textColor="#000000"/>

    <Button
        android:layout_height="48dp"
        android:layout_width="48dp"
        android:text="+"
        android:onClick="increment"/>
    </LinearLayout>

    <TextView
        android:id="@+id/order_summary_text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="訂單資訊"
        android:textSize="16sp"
        android:layout_marginTop="16dp"/>
        
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/price_text_view"
        android:layout_marginTop="16dp"
        android:textSize="16sp"
        android:textColor="#000000"/>
        
    <Button
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_marginTop="16dp"
        android:text="送出訂單"
        android:onClick="submitOrder"/>
</LinearLayout>

MainActivity.java中的重點

• 建置一個createOrderSummary()方法來總結我們的訂單資訊。
  • 包含2個參數(price, hasPlasticBag)。
• 在送出訂單時叫用方法submitOrder()
  • 確認CheckBox的狀態：boolean hasPlasticBag = plasticBagCheckBox.isChecked();
  • 如果該值為true，代表我們需要在總金額(price)加上2元。
  • 交由createOrderSummary()來組合訂單資訊。

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.CheckBox;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {
    int quantity = 2;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

    public void increment(View view){
        quantity = quantity + 1;
        displayQuantity(quantity);
    }

    public void decrement(View view){
        quantity = quantity - 1;
        displayQuantity(quantity);
    }

    private int calculatePrice(){
        return quantity * 80;
    }

    private String createOrderSummary(int price, boolean hasPlasticBag){
        String priceMessage = "顧客名稱: KH";
        priceMessage += "\n加購塑膠袋? " + hasPlasticBag;
        priceMessage += "\n數量： " + quantity;
        priceMessage += "\n總金額： " + price;
        priceMessage += "\n謝謝惠顧";
        return priceMessage;
    }

    //送出訂單
    public void submitOrder(View view){
        // 用一個CheckBox型別的變數儲存CheckBox，並依其狀態設定
        CheckBox plasticBagCheckBox = findViewById(R.id.addPlasticBag_checkbox);
        boolean hasPlasticBag = plasticBagCheckBox.isChecked();
        int price = calculatePrice();
        if(hasPlasticBag==true){
            price += 2;
        }

        String priceMessage = createOrderSummary(price, hasPlasticBag);
        displayMessage(priceMessage);
    }

    private void displayQuantity(int number){
        TextView quantityTextView = findViewById(R.id.quantity_text_view);
        quantityTextView.setText("" + number);
    }

    private void displayMessage(String priceMessage){
        TextView quantityTextView = findViewById(R.id.price_text_view);
        quantityTextView.setText("" + priceMessage);
    }
}

運作結果

小結

在今天的分享中，組合了前幾天所用到的各種Views，以及功能，明天開始會再來看另一個應用-籃球比賽計分的APP(原始碼來自Android教學)，會用到不太一樣的排版方式以及會用到res資料夾中的styles.xml文件囉。

TIP: 從這個例子開始，我們在java中需要import的類別越來越多，這部分除了查看文件要import哪些類別以外，也可以在Android Studio中開啟自動import選項，路徑為File -> Settings -> Editor -> General -> Auto Import -> Java，將Add unambigious imports on the fly勾選起來。